import { Layout, Playground, Attributes } from 'lib/components'
import { Image, Display, Code } from 'components'

export const meta = {
  title: 'Image',
  group: 'Data Display',
}

## Image

Display image content.

<Playground
  title="Basic"
  scope={{ Image }}
  code={`
<Image width="540px" height="160px" src="/images/custom-domains.png" />
`}
/>

<Playground
  title="Skeleton"
  desc="`Image` will show skeleton animation after `width` and `height` props are set."
  scope={{ Image }}
  code={`
<Image width="540px" height="160px"
  src="http://www.deelay.me/2000/https://react.geist-ui.dev/images/custom-domains.png" />
`}
/>

<Playground
  title="Browser"
  desc="Add a browser style wrapper to the image."
  scope={{ Image, Display, Code }}
  code={`
<Image.Browser url="https://react.geist-ui.dev/en-us/guide/introduction" anchorProps={{ rel: 'nofollow' }}>
  <Image width="540px" height="246px" src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png" />
</Image.Browser>
`}
/>

<Playground
  title="Browser Invert"
  scope={{ Image, Display, Code }}
  code={`
<Image.Browser url="https://react.geist-ui.dev/en-us/guide/introduction" invert>
  <Image width="540px" height="246px" src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png" />
</Image.Browser>
`}
/>

<Playground
  title="Compose"
  desc="Show `Image` in `Display` component."
  scope={{ Image, Display, Code }}
  code={`
<Display shadow caption={<p>Set the <Code>height</Code> to reduces the possibility of page rerender.</p>}>
  <Image width="540px" height="246px" src="/images/branch-domains.png" />
</Display>
`}
/>

<Attributes edit="/pages/en-us/components/image.mdx">
<Attributes.Title>Image.Props</Attributes.Title>

| Attribute             | Description                             | Type                | Accepted values           | Default |
| --------------------- | --------------------------------------- | ------------------- | ------------------------- | ------- |
| **src**               | image src                               | `string`            | -                         | -       |
| **disableSkeleton**   | disable skeleton animation when loading | `boolean`           | -                         | `false` |
| **disableAutoResize** | disable zooming when width is too small | `boolean`           | -                         | `false` |
| **maxDelay**(ms)      | max duration of animation               | `number`            | -                         | `3000`  |
| ...                   | native props                            | `ImgHTMLAttributes` | `'alt', 'className', ...` | -       |

<Attributes.Title>Image.Browser.Props</Attributes.Title>

| Attribute        | Description                           | Type                   | Accepted values          | Default |
| ---------------- | ------------------------------------- | ---------------------- | ------------------------ | ------- |
| **title**        | show text title (when "url" is unset) | `string`               | -                        | -       |
| **url**          | show url on browser address input     | `string`               | -                        | -       |
| **showFullLink** | show full url                         | `boolean`              | -                        | `false` |
| **invert**       | invert colors                         | `boolean`              | -                        | `false` |
| **anchorProps**  | props of element `a`                  | `AnchorHTMLAttributes` | -                        | `{}`    |
| ...              | native props                          | `HTMLAttributes`       | `'id', 'className', ...` | -       |

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
